<template>
	<div>
		<cc-table-modify
			:items="rooms"
			with-delete
			@add="handleRoomDialogOpen(true)"
			@change="handleRoomsChange"
		>
			<!-- 表格区域 -->
			<template>
				<el-table-column label="房间号" prop="tag" />
				<el-table-column label="房间类型" prop="type">
					<template v-slot="scope">
						<span>{{scope.row.type.title}}</span>
					</template>
				</el-table-column>
			</template>

			<template #operate>
				<el-table-column label="操作" width="120px">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="修改" placement="top">
							<el-button
								type="primary"
								icon="el-icon-edit"
								size="mini"
								@click="handleRoomDialogOpen(false, scope.row)"
							/>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="编辑床位" placement="top">
							<el-button
								type="warning"
								icon="el-icon-setting"
								size="mini"
								@click="handleBedsDialogOpen(scope.row)"
							/>
						</el-tooltip>
					</template>
				</el-table-column>
			</template>
		</cc-table-modify>

		<!-- 创建/编辑房间面板 -->
		<el-dialog
			:title="isAddingMode ? '添加房间' : '编辑房间'"
			:visible.sync="roomDialogVisible"
			width="75%"
			@closed="handleRoomDialogClosed"
		>
			<el-form :model="room" :rules="roomRules" ref="roomFormRef">
				<el-form-item label="房间号" :label-width="labelWidth" prop="tag" v-if="isAddingMode">
					<el-input v-model="room.tag" autocomplete="off" />
				</el-form-item>

				<el-form-item label="房间号" :label-width="labelWidth" v-else>
					<span class="room-tag">{{room.tag}}</span>
				</el-form-item>

				<el-form-item label="房间类型" :label-width="labelWidth" prop="type">
					<el-select v-model="room.type" placeholder="请选择类型">
						<el-option v-for="item in roomTypes" :key="item._id" :label="item.title" :value="item._id"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="是否按床位售卖" :label-width="labelWidth" prop="isBedMode">
					<el-switch v-model="room.isBedMode" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>

				<el-form-item label="楼层" :label-width="labelWidth" prop="floor">
					<el-input v-model.number="room.floor" autocomplete="off" />
				</el-form-item>

				<el-form-item label="属于" :label-width="labelWidth" prop="owner">
					<el-select v-model="room.owner" placeholder="请选择">
						<el-option v-for="(item, index) in owners" :key="index" :label="item" :value="item"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="位于" :label-width="labelWidth" prop="building">
					<el-select v-model="room.building" placeholder="请选择">
						<el-option v-for="(item, index) in buildings" :key="index" :label="item" :value="item"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="设施" :label-width="labelWidth" prop="facilities">
					<el-checkbox-group v-model="room.facilities" size="mini" class="facility-group">
						<el-checkbox v-for="fcl in facilities" :label="fcl._id" :key="fcl._id" border>{{fcl.title}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>

				<el-form-item label="备注" :label-width="labelWidth" prop="comment">
					<el-input
						type="textarea"
						:autosize="{ minRows: 3, maxRows: 15}"
						v-model.number="room.comment"
						autocomplete="off"
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="roomDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sendRoomRequest">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 编辑床位面板 -->
		<el-dialog
			title="编辑床位"
			:visible.sync="bedsDialogVisible"
			width="70%"
			@close="handleBedsDialogClose"
		>
			<cc-table-modify with-delete :items="room.beds">
				<template>
					<el-table-column prop="serial" label="编号">
						<template v-slot="scope">
							<el-input v-model="scope.row.serail" />
						</template>
					</el-table-column>

					<el-table-column prop="type" label="类型">
						<template v-slot="scope">
							<el-select v-model="scope.row.type">
								<el-option v-for="bed in bedTypes" :key="bed._id" :label="bed.title" :value="bed._id"></el-option>
							</el-select>
						</template>
					</el-table-column>

					<el-table-column prop="isUpper" label="上下铺">
						<template v-slot="scope">
							<el-select v-model="scope.row.isUpper">
								<el-option label="上铺" :value="true" />
								<el-option label="下铺" :value="false" />
							</el-select>
						</template>
					</el-table-column>
				</template>
			</cc-table-modify>

			<span slot="footer">
				<el-button @click="bedsDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ccTableModify from "@/components/cc-table-modify";
	import ccPanelBeds from "@/components/cc-panel-beds";
	import ccBedItem from "@/components/cc-bed-item";
	import roomRules from "./form-rules/roomRules";

	export default {
		name: "rooms-list",
		components: {
			"cc-table-modify": ccTableModify,
			"cc-panel-beds": ccPanelBeds,
			"cc-bed-item": ccBedItem
		},
		data() {
			return {
				rooms: [],
				roomTypes: [],
				bedTypes: [],
				facilities: [],
				owners: ["熊猫夫人", "交通饭店"],
				buildings: ["熊猫夫人", "交通饭店"],
				roomDialogVisible: false,
				room: {},
				roomRules,
				labelWidth: "120px",
				isAddingMode: false,
				bedsDialogVisible: false
			};
		},
		computed: {},
		created() {
			this.resetRoom();
			this.getRoomTypes();
			this.getBedTypes();
			this.getFacilities();
			this.getRooms();
		},
		methods: {
			resetRoom() {
				this.room = {
					tag: "",
					type: "",
					isBedMode: false,
					floor: 1,
					owner: "熊猫夫人",
					building: "熊猫夫人",
					facilities: [],
					beds: [],
					comment: "",
					layout: 0,
					toRight: false,
					withUpper: false
				};
			},
			async getRooms() {
				this.rooms = await this.$http.get("/rooms");
			},
			async getRoomTypes() {
				this.roomTypes = await this.$http.get("/room-types", {
					isBed: false
				});
			},
			async getBedTypes() {
				this.bedTypes = await this.$http.get(
					"/bed-types",
					undefined,
					false
				);
			},
			async getFacilities() {
				this.facilities = await this.$http.get("/facilities");
			},
			// 添加/编辑房间
			async sendRoomRequest() {
				const { isAddingMode: isAdd, room } = this;
				this.$refs.roomFormRef.validate(async valid => {
					if (!valid) return;
					const method = isAdd ? "post" : "put";
					const url = isAdd ? "/rooms" : `/rooms/${room._id}`;
					const res = await this.$http[method](url, room, true);
					if (!res) return;
					this.roomDialogVisible = false;
					this.getRooms();
				});
			},
			async handleRoomsChange(items, dItems) {
				const res = await this.$http.delete(
					`/rooms/${dItems.map(i => i._id).join("-")}`,
					void 0,
					true
				);
				res && (this.rooms = items);
			},
			// 点击编辑房间按钮事件
			handleRoomDialogOpen(isAdd, room) {
				this.isAddingMode = isAdd;
				if (!isAdd) {
					const { type, ...rest } = room;
					this.room = { ...rest, type: type._id };
				}
				this.roomDialogVisible = true;
			},
			// 弹出框关闭事件
			handleRoomDialogClosed() {
				this.isAddingMode && this.$refs.roomFormRef.resetFields();
				this.resetRoom();
			},
			handleBedsDialogOpen() {
				this.room = {
					_id: 1,
					layout: 0,
					toRight: false,
					withUpper: false,
					beds: [
						{
							_id: 11,
							type: "5e3b94d24e0ef203589a4ca7",
							isUpper: false
						},
						{
							_id: 22,
							type: "5e3b94d24e0ef203589a4ca7",
							isUpper: false
						},
						{
							_id: 33,
							type: "5e3b94d24e0ef203589a4ca7",
							isUpper: false
						}
					]
				};
				this.bedsDialogVisible = true;
			},
			handleBedsDialogClose() {
				this.resetRoom();
			}
		}
	};
</script>
<style lang="less">
	.el-dialog {
		.room-tag {
			font-size: 26px;
			font-weight: 700;
			color: #303133;
		}

		.facility-group {
			.el-checkbox.is-bordered {
				margin-left: 0;
			}
		}

		.container-beds {
			width: 400px;
			display: flex;
			border: 1px solid #036;

			&.beds-layout-0 {
				flex-direction: column;
				justify-content: space-around;

				&.beds-right {
					align-items: flex-end;
				}
			}

			&.beds-layout-1 {
				flex-wrap: wrap;
				justify-content: space-between;

				.cc-bed-item:nth-child(2n) {
					border-left: 1px solid #036;
					border-right: none;
				}
			}
		}
	}
</style>
